<template>


  <div class="max">
    <restaurant class="tou"></restaurant>
<!--    <input class="inp" type="text" placeholder="        输入关键字..." />-->
<!--    <van-icon class="sousuo" name="search" />-->
<div>
  <div class="banner">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image"  width="100%"height="100%"/>
      </van-swipe-item>
    </van-swipe>
  </div>
</div>





    <!--    <xiangqing></xiangqing>-->
    <div v-for="item in list" @click="shopMsg(item.branchid)" >
      <div class="bottom">
        <div >
          <div class="left">
            <!-- 图片位置 -->
            <img
                    class="imgs"
                    :src="item.branchUrl"
                    alt=""
            />
          </div>
          <div class="right">
            <div class="shang">
              <span class="span1">{{item.branchname}}</span><br />
              <div class="span2">{{item.describle}}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div style="height: 80px;text-align: center;margin-top: 10px">到底了~</div>
  </div>
</template>

<script>
import restaurant from "../components/home-restaurant.vue";
import xiangqing from "../components/xiangqing.vue";
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  components: {
    restaurant,
    xiangqing,
  },
  data() {
    return {
      images: [
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.itc.cn%2Fimages01%2F20210930%2Fd3e2baf7db454922b6bab5365c42c81d.jpeg&refer=http%3A%2F%2Fp6.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666594236&t=3b8e76fc92bb09858b854d00ad837f55',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.itc.cn%2Fimages01%2F20210930%2Fd8aac357feaf443c8b67ca7051d03a9b.jpeg&refer=http%3A%2F%2Fp6.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666594236&t=f99d67752c5d9e523019f845408eb13d',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fimages01%2F20210930%2F0b2eccb0e335401f9750900dfead0da5.jpeg&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666594236&t=10062613861fa6e0962d243f8f8a159a'
      ],

      id: "",
      list:[

      ]
    };
  },
  created() {
    this.initFindAll();
  },
  methods:{
    initFindAll(){
      this.$http.post("/branch/findAll").then(result=>{
          console.log(result)
          if (result.data.code===2000){
            this.list = result.data.data;
          }
      })
    },
    //从数据库中查询的id
    shopMsg(id) {
      sessionStorage.setItem("branchid",id)
      this.$router.push({
        name: "msg",
        // params: { id: id },
      });
    },
  }
};
</script>

<style lang='less' scoped>
.sousuo {
  font-size: 5.6333vw;
  font-weight: 600;
  color: rgb(145, 145, 145);
  position: absolute;
  top: 21.9667vw;
  left: 5.6667vw;
}
.max {
  position: relative;
  overflow: hidden;
  width: 100%;
  /*height: 266.6667vw;*/
  height: 100%;
}

.tou {
  /*position: fixed;*/
}
.inp {
  font-size: 4.3vw;
  margin-left: 5%;
  width: 90%;
  height: 10.6667vw;
  border: #e74e40 1px solid;
  margin-top: 18.6667vw;
  border-radius: 1.3333vw;
}


.imgs {
  width: 100%;
  /*height: 100%;*/
  height: 18.666vw;
}
.span2 {
  margin-top: 2.6667vw;
  font-size: 20px;
}
.span1 {
  font-size: 4.3667vw;
}
.shang {
  width: 80%;
  height: 15.3333vw;
  // border: red 1px solid;
  margin-top: 4.6667vw;
  margin-left: 5vw;
}
.right {
  width: 75%;
  height: 100%;
  // background-color: green;
  float: left;
}
.left {
  width: 25%;
  height: 100%;
  // background-color: yellow;
  float: left;
}

.bottom {
  width: 94%;
  height: 18.6667vw;
  // background-color: aquamarine;
  margin-top: 2.6667vw;
  margin-left: 3%;
  margin-right: 3%;
  overflow: hidden;
  border: #3d3938 1px solid;
}
.banner{
   width: 94%;
   height: 39vw;
   /*margin-top: 14vw;*/
   margin-left: 3%;
   margin-right: 3%;
   overflow: hidden;
   border: #3d3938 1px solid;
 }
</style>